import { defineStore } from "pinia";

export const UseWeekStore = defineStore('week', {
    state: () => {
        return {
            strweek:['周日','周一','周二','周三','周四','周五','周六']
        }
    },
    getters: {
        
    },
    actions:{}
})

export const UseAuthCode = defineStore('AuthCode', {
    state: () => {
        return {
            yanzhen: "",//输入框双向绑定的值
            true_code: "",//保存正确的验证码
            yanzhen_arr:[],//只用于传参，并且数组长度不能「多于」下面验证码遍历的次数，不然最终得到的true_code会有问题 
            //比如下面是4个验证码，可以是[1,2,3,4]及以下，但是不能是[1，2，3，4，5]， 因为5无法被替换
        }
    },
    getters: {
        
    },
    actions: {
        //显示验证码区域内容信息
        draw(show_num) {
        let canvas_width =  document.querySelector("#canvas").clientWidth;
        let canvas_height = document.querySelector("#canvas").clientHeight;
        let canvas = document.getElementById("canvas"); //获取到canvas
        let context = canvas.getContext("2d"); //获取到canvas画图
        canvas.width = canvas_width;
        canvas.height = canvas_height;
        let sCode =
          "a,b,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
        var aCode = sCode.split(",");
        let aLength = aCode.length; //获取到数组的长度
  
        //4个验证码数
        for (var i = 0; i <= 3; i++) {
          var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
          var deg = (Math.random() * 30 * Math.PI) / 180; //产生0~30之间的随机弧度
          let txt = aCode[j]; //得到随机的一个内容
          show_num[i] = txt.toLowerCase();// 依次把取得的内容放到数组里面
          let x = 10 + i * 20; //文字在canvas上的x坐标
          let y = 20 + Math.random() * 8; //文字在canvas上的y坐标
          context.font = "bold 23px 微软雅黑";
  
          context.translate(x, y);
          context.rotate(deg);
  
          context.fillStyle = this.randomColor();
          context.fillText(txt, 0, 0);
  
          context.rotate(-deg);
          context.translate(-x, -y);
        }
        //验证码上显示6条线条
        for (let i = 0; i <= 5; i++) {
          context.strokeStyle = this.randomColor();
          context.beginPath();
          context.moveTo(
            Math.random() * canvas_width,
            Math.random() * canvas_height
          );
          context.lineTo(
            Math.random() * canvas_width,
            Math.random() * canvas_height
          );
          context.stroke();
        }
        //验证码上显示31个小点
        for (let i = 0; i <= 30; i++) {
          context.strokeStyle = this.randomColor();
          context.beginPath();
          var x = Math.random() * canvas_width;
          var y = Math.random() * canvas_height;
          context.moveTo(x, y);
          context.lineTo(x + 1, y + 1);
          context.stroke();
        }
  
        //最后把取得的验证码数组存起来，方式不唯一
        var num = show_num.join("");
        // console.log(num);
        this.true_code = num
        },
        //得到随机的颜色值
        randomColor() {
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return "rgb(" + r + "," + g + "," + b + ")";
        },
        //canvas点击刷新
        handleCanvas(){
            this.draw(this.yanzhen_arr);
        },
    }
})